<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>菜单管理</title>
    <link rel="stylesheet" th:href="@{/plugin/bootstrap/css/bootstrap.min.css}">
    <link rel="stylesheet" th:href="@{/plugin/font-awesome/css/font-awesome.min.css}">
    <link rel="stylesheet" th:href="@{/plugin/Ionicons/css/ionicons.min.css}">
    <link rel="stylesheet" th:href="@{/adminlte/css/AdminLTE.min.css}">
    <link rel="stylesheet" th:href="@{/adminlte/css/skins/all-skins.min.css}">
    <link rel="stylesheet" th:href="@{/system/css/common.css}">
    <link th:href="@{/plugin/bootstrap-table/bootstrap-table.min.css}" rel="stylesheet">
    <link rel="stylesheet" href="http://cdn.bootcss.com/jquery-treegrid/0.2.0/css/jquery.treegrid.min.css">
</head>
<body>

<button class="btn btn-adn" id="add-new">添加</button>
<table id="menu_table"></table>

<script src="http://cdn.bootcss.com/jquery/3.1.1/jquery.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-table/1.12.1/bootstrap-table.min.js"></script>
<script src="http://cdn.bootcss.com/bootstrap-table/1.12.0/extensions/treegrid/bootstrap-table-treegrid.js"></script>
<script src="http://cdn.bootcss.com/jquery-treegrid/0.2.0/js/jquery.treegrid.min.js"></script>
<script th:src="@{/plugin/layer/layer.js}" ></script>
<script>
    var $table = $('#menu_table');

    var data = {};

    $.ajax({
        url: "menu/list",
        dataType: "json",
        type: "get",
        success: (response) => { data = response.data;},
        error: function (data) {},
        async:false
    });

    $(function() {

        $table.bootstrapTable({
            striped: true,	//隔行换色
            search: true,		//定义右上方的搜索框，输入即可以开始搜索
            // data:data,
            url: "menu/list",
            // toolbar: '#toolbar',    //自定义组件
            // pagination: false,	//显示表格的底部工具栏
            // sidePagination: 'server',   //client客户端分页，server服务器分页
            // showColumns: true,	//选列的下拉菜单
            // showRefresh: true,	//刷新按钮
            // showToggle: true,	//视图切换
            // toolbarAlign: 'left',	//自定义按钮位置
            // clickToSelect: true,	//点击行选中
            // singleSelect: true,		//单选
            idField: 'menuId',
            // dataType:'jsonp',
            columns: [

                {
                    field: 'check',
                    checkbox: true,  //多选框
                    formatter: function (value, row, index) {
                        if (row.check == true) {
                            // console.log(row.serverName);
                            //设置选中
                            return {  checked: true };
                        }
                    }
                },
                {
                    field: 'menuName',
                    title: '名称' },
                {
                    field: 'menuId',
                    title: '编号',
                    sortable: true,
                    align: 'center'},
                // {
                //     field: 'parentId',
                //     title: '所属上级'},
                {
                    field: 'status',
                    title: '状态',
                    sortable: true,
                    align: 'center',
                    formatter: 'statusFormatter'
                },
                {
                    field: 'visible',
                    title: '显示/隐藏',
                    sortable: true,
                    align: 'center',
                    formatter: 'statusFormatter'  },
                {
                    field: 'path',
                    title: '路由地址' ,
                    align: 'center',
                },
                {
                    field: 'component',
                    title: '组件路径',
                    align: 'center',},
                {
                    field: 'perms',
                    title: '权限标识',
                    align: 'center',},
                {
                    field: 'menuType',
                    title: '菜单类型'  ,
                    align: "center",
                    formatter: 'typeFormatter'},
                {
                    field: 'orderNum',
                    title: '显示顺序',
                    align: 'center',},
                {
                    field: 'operate',
                    title: '操作',
                    align: 'left',
                    // events : operateEvents,
                    formatter: 'operateFormatter' },
            ],

            // bootstrap-table-treegrid.js 插件配置 -- start

            //在哪一列展开树形
            treeShowField: 'menuName',
            //指定父id列
            parentIdField: 'parentId',
            sortName:'menuId',

            onResetView: function() {
                //console.log('load');
                // if (this.data.length > 0){
                    $table.treegrid({
                        initialState: 'collapsed',// 所有节点都折叠
                        // initialState: 'expanded',// 所有节点都展开，默认展开
                        treeColumn: 1,
                        // expanderExpandedClass: 'glyphicon glyphicon-minus',  //图标样式
                        // expanderCollapsedClass: 'glyphicon glyphicon-plus',
                        onChange: function() {
                            $table.bootstrapTable('resetWidth');
                        }
                    });

                    //只展开树形的第一级节点
                    // $table.treegrid('getRootNodes').treegrid('collapsed');
                // }

            },
            onCheck:function(row){
                var datas = $table.bootstrapTable('getData');
                // 勾选子类
                selectChilds(datas,row,"menuId","parentId",true);

                // 勾选父类
                selectParentChecked(datas,row,"menuId","parentId")

                // 刷新数据
                $table.bootstrapTable('load', datas);
            },

            onUncheck:function(row){
                var datas = $table.bootstrapTable('getData');
                selectChilds(datas,row,"menuId","parentId",false);
                $table.bootstrapTable('load', datas);
            },
            // bootstrap-table-treetreegrid.js 插件配置 -- end
            onLoadSuccess: function (data){
                return data.data;
            }
        });
    });

    // 格式化按钮
    function operateFormatter(value, row, index) {
        return [
            '<button type="button" class="RoleOfadd btn-small  btn-primary" style="margin-right:15px;"><i class="fa fa-plus" ></i>&nbsp;新增</button>',
            '<button type="button" class="RoleOfedit btn-small   btn-primary" style="margin-right:15px;"><i class="fa fa-pencil-square-o" ></i>&nbsp;修改</button>',
            '<button type="button" class="RoleOfdelete btn-small   btn-primary" style="margin-right:15px;"><i class="fa fa-trash-o" ></i>&nbsp;删除</button>'
        ].join('');

    }
    // 格式化类型
    function typeFormatter(value, row, index) {
        if (value === 'M') {  return '目录';  }
        if (value === 'C') {  return '菜单'; }
        if (value === 'F') {  return '按钮'; }
        return '-';
    }
    // 格式化状态
    function statusFormatter(value, row, index) {
        if (value == 0) {
            return '<span class="label label-success">正常</span>';
        } else {
            return '<span class="label label-default">停用</span>';
        }
    }


    $("#add-new").click(function(){
        addMenu();
    });


    function addMenu(pid){
        var url = '/menu/add';
        if (pid){
            url += "?pid=" + pid;
        }
        layer.open({
            title: '添加菜单'
            ,type: 2
            , area: ['580px', '500px']
            ,maxmin : true
            ,shade: 0.8
            ,resize: true
            ,content: url //iframe的url
        });

    }
</script>

</body>
</html>